<template>
  <div class="collect">
    <div class="typeshoess">
      <el-row>
        <el-col :span="4" v-for="(o, index) in lists" :key="o.collectionId">
          
            <el-card class="typeCard" shadow="hover">
              <router-link
            :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
            style="text-decoration:none;"
          >
              <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
              </router-link>
              <div class="priceImage">
                <span>￥{{o.shoesPrice}}</span>
              </div>
              <div class="nameImage">
                <span>{{o.shoesName}}</span>
                <el-button type="text" style="color: #f56c6c;margin-left: 200px;" @click="remove(index)"
              >删除</el-button>
              </div>
              <div class="otherImage">
                <el-row>
                  <el-col :span="14">
                    <el-row class="monthNumber">
                      <el-col :span="11">月成交</el-col>
                      <el-col :span="13" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="10">
                    <el-row class="talkNumber">
                      <el-col :span="10">评价</el-col>
                      <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [

      ],
    };
  },
  created() {
    let that = this;
    let userId = JSON.parse(localStorage.getItem("user")).userId;
    that.$axios
      .post("/collection/queryCollectionInfoByUserId?userId=" + userId, {})
      .then(function(response) {
        console.log(that.lists)
              that.lists =response.data.data.rows;
        })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods:{
     remove(index) {
      let that = this;
      let collectionId = that.lists[index].collectionId;
      that.$axios
        .post("/collection/collectionDelete?collectionId=" + collectionId, {})
        .then(function (response) {
          console.log(response);
          alert("商品已从收藏夹中删除！");
           window.location.reload(true);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

  }
};
</script>

<style scoped>
.collect .typeshoess >>> .el-tabs__active-bar {
  background-color: #e6a23c;
}
.collect .typeshoess >>> .el-tabs__item.is-active {
  color: #e6a23c;
}
.collect .typeshoess >>> .el-tabs__item:hover {
  color: #e6a23c;
}
.collect .typeshoess >>> .el-card__body {
  padding: 0px;
}
.collect .typeshoess >>> .el-card.is-hover-shadow:hover {
  border: 1px solid #e6a23c;
}
.collect .typeImage {
  width: 180px;
  height: 180px;
  margin-left: 16px;
}
.collect .typeCard {
  height: 306px;
  margin: 0px 10px 10px 10px;
}
.collect .priceImage {
  color: #ff0036;
  font-family: Arial;
  font-weight: 400;
  font-size: 20px;
  margin-left: 12px;
}
.collect .nameImage {
  font-size: 12px;
  line-height: 14px;
  margin-top: 10px;
  margin-left: 16px;
}
.collect .otherImage {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
  border: 1px solid #eee;
  line-height: 40px;
  height: 40px;
}
.collect .otherImage .monthNumber {
  border-right: 1px solid #eee;
}
.collect .monthNumber .numberImage {
  color: #b57c5b;
}
.collect .talkNumber .talkImage {
  color: #38b;
}
</style>>
</style>
